<template>
  <div class="log">
    <van-nav-bar
      :title="'运行日志 (' + LogList.length + ')'"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="log-content">
      <div class="log-content-tip">数据更新时间：{{ lastTime }}</div>
      <div class="empty" v-if="LogList.length === 0">
        <van-empty description="暂无日志" />
      </div>
      <van-cell-group v-else inset class="setting-content-cell">
        <van-cell
          center
          v-for="item in LogList"
          :key="item"
          class="log-content-cell"
          :title="item.deviceName"
          :value="item.state"
          :label="item.time"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lastTime: "",
      LogList: [],
      paramsRes: "",
    };
  },
  watch: {
    paramsRes: {
      handler(newVal, oldVal) {
        this.dataConver(newVal);
      },
      deep: true,
    },
  },
  created() {
    this.paramsRes = this.$route.params;
    this.dataConver(this.paramsRes);
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    dataConver(newVal) {
      this.LogList = [];
      this.lastTime = newVal.mqttMsg.time;
      var logOr = newVal.mqttMsg.log;
      try {
        logOr.forEach((element) => {
        var logitem = element.split(";");
        const item = {
          time: logitem[0],
          deviceName: logitem[1],
          state: logitem[2],
        };
        this.LogList.push(item);
      });
      } catch (error) {
        
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.empty {
  z-index: 1;
  height: auto;
  border-radius: 20px;
  margin: 20px 20px;
  box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
.log {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  position: absolute;
  &-content {
    margin: 20px 0;
    &-tip {
      text-align: center;
      margin: 20px 20px 6px 26px;
      color: #fff;
    }
  }
}
</style>